<template>
  <div class="app-container">

    <el-form :inline="true" :model="replyPageRequest" class="demo-form-inline" size="small">
      <el-form-item :style="{maxWidth: isMobile ? '210px' : '500px'}">
        <el-input v-model="replyPageRequest.name" placeholder="请输入答辩名称">
          <el-button slot="append" type="primary" style="background-color: #409EFF; color: white" @click="getReplyList">
            搜索
          </el-button>
        </el-input>
      </el-form-item>
    </el-form>

    <el-card v-for="reply in list" :key="reply.id" class="box-card">
      <router-link
        :to="{path: '/student/reply', query: {
          replyId: reply.id
      }}">
        <el-row :gutter="20">
          <el-col :span="17">
            <span style="font-size: larger">{{ reply.title }}</span>
          </el-col>
          <el-col :span="7"><span style="font-size: small">{{ reply.config }}</span></el-col>
        </el-row>
      </router-link>
    </el-card>

    <br>

    <div class="block">
      <el-pagination
        v-if="!isMobile"
        :current-page="page"
        :page-sizes="[5, 10, 15, 30, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changSize"
        @current-change="changePage"/>
      <el-pagination
        v-else
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        small
        layout="prev, pager, next"
        @current-change="changePage"/>
    </div>

  </div>
</template>

<script>
import studentReplyApi from '@/api/student/reply'
import { isPasswordValid } from '@/api/login'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      page: 1,
      total: 0,
      pageSize: 10,
      LabelWidth: '80px',
      isMobile: false,

      replyPageRequest: {
        page: 1,
        limit: 10,
        name: null
      }
    }
  },
  created() {
    this.isMobile = document.body.clientWidth <= 576
    this.getReplyList()
    this.isPasswordValid()
  },
  methods: {
    getReplyList() {
      this.listLoading = true
      this.replyPageRequest.page = this.page
      this.replyPageRequest.limit = this.pageSize
      studentReplyApi.getAllReplys(this.replyPageRequest).then(res => {
        this.listLoading = false
        this.total = Number.parseInt(res.result.counts)
        this.list = res.result.items
      }).catch(error => {
        console.log(error)
      })
    },
    isPasswordValid() {
      isPasswordValid().then(res => {
        if (res.result) {
          this.instance = this.$notify({
            title: '密码检验',
            dangerouslyUseHTMLString: true,
            message: '您的密码为初始密码，为了您的账号安全，请尽快修改新的密码，点击<a href="#/student/info" class="" style="color: rgb(64, 158, 255);"> 修改密码 </a>，或在“个人信息”中查看修改。',
            duration: 0,
            onClick: () => {
              if (event.target.nodeName === 'A') {
                this.instance.close()
              }
            }
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    changSize(pageSize) {
      this.pageSize = pageSize
      this.getReplyList()
    },
    changePage(page) {
      this.page = page
      this.getReplyList()
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-card:hover {
  color: rgb(64, 158, 255);
}
</style>
